<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ShaofeiZi Blog · 做个日常记录</title>
    <meta name="description" content="訾绍飞的博客。万物皆有裂缝处，那是光射进来的地方。">
    <link rel="shortcut icon" href="/BLOG/favicon.ico">
  <link rel="manifest" href="/BLOG/manifest.json">
  <meta name="theme-color" content="#3F51B5">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon" href="/BLOG/icons/192.png">
  <link rel="mask-icon" href="/BLOG/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/icons/192.png">
  <meta name="msapplication-TileColor" content="#3F51B5">
    
    <link rel="preload" href="/BLOG/assets/css/42.styles.90045bd1.css" as="style"><link rel="preload" href="/BLOG/assets/js/app.1a725be8.js" as="script"><link rel="prefetch" href="/BLOG/assets/js/7.88ba0bb7.js"><link rel="prefetch" href="/BLOG/assets/js/0.d3e592bd.js"><link rel="prefetch" href="/BLOG/assets/js/1.39b9c99c.js"><link rel="prefetch" href="/BLOG/assets/js/2.68dc10c9.js"><link rel="prefetch" href="/BLOG/assets/js/3.dfebdd5e.js"><link rel="prefetch" href="/BLOG/assets/js/4.ea97a821.js"><link rel="prefetch" href="/BLOG/assets/js/5.d8c2ecbf.js"><link rel="prefetch" href="/BLOG/assets/js/6.e51cd79c.js"><link rel="prefetch" href="/BLOG/assets/js/8.d9eebc06.js"><link rel="prefetch" href="/BLOG/assets/js/9.1a541d13.js"><link rel="prefetch" href="/BLOG/assets/js/10.4ec9ca67.js"><link rel="prefetch" href="/BLOG/assets/js/11.02558377.js"><link rel="prefetch" href="/BLOG/assets/js/12.d0e2086f.js"><link rel="prefetch" href="/BLOG/assets/js/13.5af02ddd.js"><link rel="prefetch" href="/BLOG/assets/js/14.5d9fcbf2.js"><link rel="prefetch" href="/BLOG/assets/js/15.ca0178b2.js"><link rel="prefetch" href="/BLOG/assets/js/16.cd99d056.js"><link rel="prefetch" href="/BLOG/assets/js/17.56f11c1d.js"><link rel="prefetch" href="/BLOG/assets/js/18.21837cc7.js"><link rel="prefetch" href="/BLOG/assets/js/19.73335fea.js"><link rel="prefetch" href="/BLOG/assets/js/20.1632ab79.js"><link rel="prefetch" href="/BLOG/assets/js/21.43175244.js"><link rel="prefetch" href="/BLOG/assets/js/22.5b7c0cca.js"><link rel="prefetch" href="/BLOG/assets/js/23.e624ba97.js"><link rel="prefetch" href="/BLOG/assets/js/24.ac5f7b41.js"><link rel="prefetch" href="/BLOG/assets/js/25.6934a11d.js"><link rel="prefetch" href="/BLOG/assets/js/26.407b2583.js"><link rel="prefetch" href="/BLOG/assets/js/27.7449d673.js"><link rel="prefetch" href="/BLOG/assets/js/28.52e25437.js"><link rel="prefetch" href="/BLOG/assets/js/29.fba21f3a.js"><link rel="prefetch" href="/BLOG/assets/js/30.2cd6d3e2.js"><link rel="prefetch" href="/BLOG/assets/js/31.0b0a749f.js"><link rel="prefetch" href="/BLOG/assets/js/32.92134487.js"><link rel="prefetch" href="/BLOG/assets/js/33.ad2b89cc.js"><link rel="prefetch" href="/BLOG/assets/js/34.9b22334e.js"><link rel="prefetch" href="/BLOG/assets/js/35.825f3d75.js"><link rel="prefetch" href="/BLOG/assets/js/36.cc3da84c.js"><link rel="prefetch" href="/BLOG/assets/js/37.8f339f62.js"><link rel="prefetch" href="/BLOG/assets/js/38.5674618f.js"><link rel="prefetch" href="/BLOG/assets/js/39.180f0d85.js"><link rel="prefetch" href="/BLOG/assets/js/40.275f26e3.js"><link rel="prefetch" href="/BLOG/assets/js/41.ce0f5927.js">
    <link rel="stylesheet" href="/BLOG/assets/css/42.styles.90045bd1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div data-app="true" id="app" class="application theme--light"><div class="application--wrap"><div class="v-progress-linear blog-progress" style="height:3px;display:none;"><div class="v-progress-linear__background accent" style="height:3px;opacity:0.4;width:100%;"></div><div class="v-progress-linear__bar"><!----><div class="v-progress-linear__bar__determinate accent" style="width:0%;"></div></div></div><aside class="v-navigation-drawer v-navigation-drawer--close v-navigation-drawer--fixed v-navigation-drawer--is-mobile" style="height:100%;margin-top:0px;max-height:calc(100% - 0px);transform:translateX(-240px);width:240px;"><div><div class="aside-brand-wrap"><div class="aside-brand"><a href="/BLOG/" class="aside-avatar elevation-2 router-link-exact-active router-link-active"><img src="/BLOG/face.png" alt="avatar"></a><hgroup class="mt-3 variant-hide"><div class="subheading white--text">訾绍飞</div><a href="mailto:zishaofei221@gmail.com" title="zishaofei221@gmail.com" class="aside-mail primary--text text--lighten-5">zishaofei221@gmail.com</a></hgroup></div></div><hr class="v-divider theme--dark"><div class="v-list nav-list"><div class="secondary--text"><a href="/BLOG/" class="nav-active v-list__tile--active primary--text v-list__tile--active v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-home"></i></div></div><div class="v-list__tile__content">首页</div></a></div><div class="secondary--text"><a href="/BLOG/tags" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-tag"></i></div></div><div class="v-list__tile__content">标签</div></a></div><div class="secondary--text"><a href="https://github.com/ShaofeiZi" target="_blank" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fab fa-github"></i></div></div><div class="v-list__tile__content">Github</div></a></div><div class="secondary--text"><a href="/BLOG/about" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-user-secret"></i></div></div><div class="v-list__tile__content">About</div></a></div></div></div><div class="v-navigation-drawer__border"></div></aside><nav class="blog-toolbar v-toolbar v-toolbar--fixed theme--dark primary" style="margin-top:0px;padding-right:0px;padding-left:0px;transform:translateY(0px);"><div class="v-toolbar__content" style="height:56px;"><button type="button" class="v-btn v-btn--icon"><div class="v-btn__content"><i class="fa fa-bars"></i></div></button><div class="v-toolbar__title">ShaofeiZi Blog</div><div class="spacer"></div><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><div class="v-menu" style="display:none;"><div class="v-menu__activator"><button type="button" class="v-btn v-btn--icon"><div class="v-btn__content"><i class="fa fa-share-alt"></i></div></button></div><div class="v-menu__content" style="max-height:auto;min-width:0px;max-width:auto;top:12px;left:0px;transform-origin:top right;z-index:0;display:none;"><div class="v-list"><div class="secondary--text"><a class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-lg fa-copy"></i></div></div><div class="v-list__tile__title">复制链接</div></a></div></div><input type="text" tabindex="-1" aria-hidden="true" value="" class="fake-hide"></div></div></div></nav><main class="v-content" style="padding-top:56px;padding-right:0px;padding-bottom:0px;padding-left:0px;"><div class="v-content__wrap"><div class="container blog-container grid-list-xl align-center"><ul class="layout row wrap reset"><li class="flex xs12"><article class="v-card list-card" style="height:undefined;"><div class="v-card__title"><div class="flex xs12"><a href="/BLOG/posts/FuzzySearch.html" class="headline post-title-link">模糊搜索</a><div class="post-meta"><time datetime="2018-07-06T19:41:21.000Z" class="secondary--text post-time">2018年07月07日</time></div></div></div><div class="v-card__text pt-0 pb-0"><div class="flex xs12"># 前端模糊搜索
 在一个搜索框中数据很多，或者需要做推荐的时候，根据用户输入信息自动推荐相关选项是一个很常见的需求。
</div></div><div class="v-card__actions"><div class="flex xs12"><a href="/BLOG/tags/FuzzySearch"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">FuzzySearch</span></span></a><a href="/BLOG/tags/模糊搜索"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">模糊搜索</span></span></a></div></div></article></li><li class="flex xs12"><article class="v-card list-card" style="height:undefined;"><div class="v-card__title"><div class="flex xs12"><a href="/BLOG/posts/XMLHTTPRequest.html" class="headline post-title-link">ajax 原理与封装</a><div class="post-meta"><time datetime="2018-07-04T10:22:38.000Z" class="secondary--text post-time">2018年07月04日</time></div></div></div><div class="v-card__text pt-0 pb-0"><div class="flex xs12">
说起 ajax，大家都不陌生。但是由于目前很多框架或者库等都对网络请求做了封装，导致了很多初学者只知其然而不知其所以然。所以今天我们就详细了解一下 ajax 的实现原理和封装 ajax 的关键步骤。

ajax 的核心是 XMLHttpRequest 对象。首先我们先创建一个 XMLHTTPRequest 对象
```javascript
var xhr = new XMLHttpRequest()
```
</div></div><div class="v-card__actions"><div class="flex xs12"><a href="/BLOG/tags/前端"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">前端</span></span></a><a href="/BLOG/tags/ajax"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">ajax</span></span></a><a href="/BLOG/tags/XMLHTTPRequest"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">XMLHTTPRequest</span></span></a></div></div></article></li><li class="flex xs12"><article class="v-card list-card" style="height:undefined;"><div class="v-card__title"><div class="flex xs12"><a href="/BLOG/posts/VueaddRXJS.html" class="headline post-title-link">RxJS实践，Vue如何集成RxJS</a><div class="post-meta"><time datetime="2018-07-04T01:41:21.000Z" class="secondary--text post-time">2018年07月04日</time></div></div></div><div class="v-card__text pt-0 pb-0"><div class="flex xs12">
本文章不会对RxJS的原理进行讲解，仅讨论如何在vue中对RxJS进行集成
</div></div><div class="v-card__actions"><div class="flex xs12"><a href="/BLOG/tags/VUE"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">VUE</span></span></a><a href="/BLOG/tags/RxJS"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">RxJS</span></span></a><a href="/BLOG/tags/vue-rx"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">vue-rx</span></span></a></div></div></article></li><li class="flex xs12"><article class="v-card list-card" style="height:undefined;"><div class="v-card__title"><div class="flex xs12"><a href="/BLOG/posts/angular_concept.html" class="headline post-title-link">angula重要概念</a><div class="post-meta"><time datetime="2018-07-01T12:15:53.000Z" class="secondary--text post-time">2018年07月01日</time></div></div></div><div class="v-card__text pt-0 pb-0"><div class="flex xs12"></div></div><div class="v-card__actions"><div class="flex xs12"><a href="/BLOG/tags/RXJS"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">RXJS</span></span></a><a href="/BLOG/tags/angular"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">angular</span></span></a></div></div></article></li><li class="flex xs12"><article class="v-card list-card" style="height:undefined;"><div class="v-card__title"><div class="flex xs12"><a href="/BLOG/posts/rxjs29.html" class="headline post-title-link">29 三十天感言</a><div class="post-meta"><time datetime="2018-04-29T12:16:21.000Z" class="secondary--text post-time">2018年04月29日</time></div></div></div><div class="v-card__text pt-0 pb-0"><div class="flex xs12"># 30 天精通 RxJS(29)：30 天感言

30 天悄悄的就过了，这 30 篇的文章基本上已经把 RxJS 一个核心三个重点(Observable + Observer + Subject + Scheduler)以及各个 operators 几乎也都有写到。最开始写这个系列的文章是希望能让 RxJS 的学习曲线降低，所以文章的前后顺序及内容都是特别规划过的，不知道我到底是不是真的做到了。

这 30 天真的是每天都像是在打仗一样，要强迫自己从脑袋中组织文字真的是一件很痛苦的事，好险最后还是撑过来了，虽然中间生了一个礼拜的病，有些文章是隔了几天才补上的，但最后仍及时的完成了全部文章真的很开心！
</div></div><div class="v-card__actions"><div class="flex xs12"><a href="/BLOG/tags/RXJS"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">RXJS</span></span></a></div></div></article></li><nav class="flex text-xs-center xs12"><ul class="v-pagination"><li><button class="v-pagination__navigation v-pagination__navigation--disabled"><i aria-hidden="true" class="v-icon fa fa-chevron-left"></i></button></li><li><button class="v-pagination__item v-pagination__item--active primary">1</button></li><li><span class="v-pagination__more">...</span></li><li><span class="v-pagination__more">...</span></li><li><button class="v-pagination__item">8</button></li><li><button class="v-pagination__navigation"><i aria-hidden="true" class="v-icon fa fa-chevron-right"></i></button></li></ul></nav></ul></div><footer class="v-footer blog-footer darken-1 mt-3 theme--dark" style="height:auto;"><div class="primary--text text--lighten-4 text-xs-center py-3 v-card v-card--flat v-card--tile primary" style="height:undefined;"><div class="v-card__text pb-0">博客内容遵循 <a rel="license noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></div><div class="v-card__text pt-0 mt-1"><span>訾绍飞 © 2015 - 2018</span><span><!---->
        Power by
        <a href="https://vuepress.vuejs.org" target="_blank" rel="noopener noreferrer">VuePress</a> Theme
        <a href="https://github.com/ShaofeiZi/BLOG" target="_blank" rel="noopener noreferrer">indigo</a></span></div></div></footer></div></main><button type="button" class="v-btn v-btn--bottom v-btn--floating v-btn--fixed v-btn--right accent" style="display:none;"><div class="v-btn__content"><i class="fa fa-lg fa-chevron-up"></i></div></button></div></div></div>
    <script src="/BLOG/assets/js/app.1a725be8.js" defer></script>
  </body>
</html>
